{% for msg in msgs %}
<div class="card border-primary shadow" style="width: 50rem; background:rgba(232, 232, 2410, 0.3)">
    <div class="card-header">
        <div class="row">
            <div class="media">
                <img src="../static/images/64.jpg" class="align-self-start mr-3" alt="好像图片加载不出来噢">
                <div class="media-body">
                    <h5 class="mt-0">{{msg.msgUserName}}</h5>
                    <p class="msgCon">{{msg.content}}</p>
                </div>
            </div>
        </div>
        <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#comment"
            onclick="sayComment('{{msg.id}}')">评论</button>
        <img src="../static/images/alarm.svg" alt="time:">
        <cite title="Source Title">{{msg.createtime}}</cite>
    </div>
    <div class="card-body">
        <ul class="list-group list-group-flush" id="{{msg.id}}">
            {% for comment in msg.comments %}
            <div class="media list-group-item" style="background: rgba(240, 227, 240, 0.2);">
                <div class="media-body">
                    <h5 class="mt-0">{{comment.comUserName}}：</h5>
                    <p class="msgCon">{{comment.content}}</p>
                </div>
                <footer class="blockquote-footer" style="color: #212529; float: right;">
                    <cite title="Source Title">{{comment.createtime}}</cite>
                </footer>
            </div>
            {% endfor %}
        </ul>
    </div>
</div>
{% endfor %}